<template>
  <div class="app-container">
    <el-card shadow="never" class="form-card">
      <div class="form-header">
        <h2 class="form-title">江西博阳李氏入会申请表</h2>
      </div>
      <el-form ref="applicationFormRef" :model="formData" :rules="rules" label-width="120px" class="application-form">
        <!-- 基本信息部分 -->
        <div class="form-section">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="formData.name" placeholder="请输入姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别" prop="gender">
                <el-select v-model="formData.gender" placeholder="请选择性别">
                  <el-option label="男" value="男" />
                  <el-option label="女" value="女" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出生年月" prop="birthDate">
                <el-date-picker v-model="formData.birthDate" type="datetime" placeholder="选择日期时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="籍贯" prop="nativePlace">
                <el-input v-model="formData.nativePlace" placeholder="请输入籍贯" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="民族" prop="ethnicity">
                <el-input v-model="formData.ethnicity" placeholder="请输入民族" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="文化程度" prop="education">
                <el-select v-model="formData.education" placeholder="请选择文化程度">
                  <el-option label="小学" value="小学" />
                  <el-option label="初中" value="初中" />
                  <el-option label="高中" value="高中" />
                  <el-option label="大专" value="大专" />
                  <el-option label="本科" value="本科" />
                  <el-option label="硕士" value="硕士" />
                  <el-option label="博士" value="博士" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="政治面貌" prop="politicalStatus">
                <el-select v-model="formData.politicalStatus" placeholder="请选择政治面貌">
                  <el-option label="群众" value="群众" />
                  <el-option label="共青团员" value="共青团员" />
                  <el-option label="中共党员" value="中共党员" />
                  <el-option label="民主党派" value="民主党派" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="专长" prop="specialty">
                <el-input v-model="formData.specialty" placeholder="请输入专长" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="推荐人" prop="recommender">
                <el-input v-model="formData.recommender" placeholder="请输入推荐人" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="手机号码" prop="phone">
                <el-input v-model="formData.phone" placeholder="请输入手机号码" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证号码" prop="idCard">
                <el-input v-model="formData.idCard" placeholder="请输入身份证号码" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="通讯地址" prop="address">
                <el-row :gutter="10">
                  <el-col>
                    <el-input v-model="formData.address" placeholder="请输入通信地址" />
                  </el-col>
                  <!-- <el-col :span="8">
                    <el-input v-model="formData.street" placeholder="街道（乡镇）" />
                  </el-col>
                  <el-col :span="8">
                    <el-input v-model="formData.community" placeholder="社区（村）" />
                  </el-col> -->
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 会员类型选择 -->
        <div class="form-section">
          <el-divider content-position="left">申请会员类别（勾选）</el-divider>
          <el-row>
            <el-col :span="24">
              <el-form-item prop="memberType">
                <el-radio-group v-model="formData.memberType">
                  <el-radio label="A">A、文史会员</el-radio>
                  <el-radio label="B">B、联盟成员</el-radio>
                  <el-radio label="C">C、联盟企业</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="formData.memberType === 'A'">
            <el-col :span="24">
              <el-form-item label="拟任总会职务" prop="proposedPosition">
                <el-radio-group v-model="formData.proposedPosition">
                  <el-radio label="会员">会员</el-radio>
                  <el-radio label="理事">理事</el-radio>
                  <el-radio label="常务理事">常务理事</el-radio>
                  <el-radio label="副会长">副会长</el-radio>
                  <el-radio label="常务副会长">常务副会长</el-radio>
                  <el-radio label="执行会长">执行会长</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- B、C类会员必填项目 -->
        <div class="form-section" v-if="formData.memberType === 'B' || formData.memberType === 'C'">
          <el-divider content-position="left">企业信息</el-divider>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="企业名称" prop="companyName">
                <el-input v-model="formData.companyName" placeholder="请输入企业名称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="职务" prop="position">
                <el-input v-model="formData.position" placeholder="请输入职务" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="企业注册资金" prop="registeredCapital">
                <el-input-number v-model="formData.registeredCapital" :min="0" :precision="2" :step="1000" style="width: 100%" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="单位地址" prop="companyAddress">
                <el-input v-model="formData.companyAddress" placeholder="请输入单位地址" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="经营范围" prop="businessScope">
                <el-input type="textarea" v-model="formData.businessScope" placeholder="请输入经营范围" :rows="3" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 缴纳会费 -->
        <div class="form-section">
          <el-divider content-position="left">缴纳会费</el-divider>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="缴纳金额" prop="paymentAmount">
                <div class="payment-amount">{{ formData.paymentAmount }} 元</div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="到账时间" prop="paymentTime">
                <el-date-picker v-model="formData.paymentTime" type="datetime" placeholder="选择日期时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="推荐人" prop="paymentRecommender">
                <el-input v-model="formData.paymentRecommender" placeholder="请输入推荐人" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="收款码">
                <div class="qr-code-container">
                  <img src="/src/assets/logo.png" alt="收款码" class="qr-code-image" />
                  <div class="qr-code-tip">请扫码支付会费</div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="支付凭证" prop="paymentProof">
                <SingleImageUpload 
                  v-model="formData.paymentProof" 
                  :max-file-size="5"
                  :style="{ width: '180px', height: '180px' }"
                />
                <div class="upload-tip">请上传支付凭证截图，大小不超过5MB</div>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 照片上传 -->
        <div class="form-section">
          <el-divider content-position="left">照片上传</el-divider>
          <el-row>
            <el-col :span="24">
              <el-form-item label="个人照片" prop="photo">
                <SingleImageUpload 
                  v-model="formData.photoUrl" 
                  :max-file-size="2"
                  :style="{ width: '180px', height: '180px' }"
                />
                <div class="upload-tip">请上传证件照，大小不超过2MB</div>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 申请人签名 -->
        <div class="form-section">
          <el-row>
            <el-col :span="8">
              <el-form-item label="申请人" prop="applicant">
                <el-input v-model="formData.applicant" placeholder="请输入申请人姓名" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="form-actions">
          <el-button @click="resetForm">重置</el-button>
          <el-button type="primary" @click="submitForm">提交申请</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="js">
import { ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import ClanAssociationAPI from '@/api/clanMember/clanMember.js';
import SingleImageUpload from '@/components/Upload/SingleImageUpload.vue';

const applicationFormRef = ref();

const formData = reactive({
  name: '张三',
  gender: '男',
  birthDate: '1990-01-01 00:00:00',
  nativePlace: '江西省上饶市',
  ethnicity: '汉族',
  education: '本科',
  politicalStatus: '群众',
  specialty: '企业管理',
  recommender: '李四',
  phone: '13800138000',
  idCard: '360123199001011234',
  address: '江西省上饶市信州区某某街道某某社区',
  // street: '',
  // community: '',
  memberType: 'A',
  proposedPosition: '会员',
  companyName: '上饶某某有限公司',
  position: '总经理',
  registeredCapital: 1000,
  companyAddress: '江西省上饶市信州区某某路123号',
  businessScope: '企业管理咨询、投资管理、资产管理',
  paymentAmount: 500,
  paymentTime: '2023-12-25 14:30:00',
  paymentRecommender: '王五',
  photoUrl: '',
  paymentProof: '',
  applicant: '张三'
});

const rules = reactive({
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  birthDate: [{ required: true, message: '请选择出生年月', trigger: 'change' }],
  ethnicity: [{ required: true, message: '请输入民族', trigger: 'blur' }],
  education: [{ required: true, message: '请选择文化程度', trigger: 'change' }],
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  idCard: [
    { required: true, message: '请输入身份证号码', trigger: 'blur' },
    { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号码', trigger: 'blur' }
  ],
  memberType: [{ required: true, message: '请选择会员类型', trigger: 'change' }],
  paymentTime: [{ required: true, message: '请选择到账时间', trigger: 'change' }],
  paymentProof: [{ required: true, message: '请上传支付凭证', trigger: 'change' }],
  applicant: [{ required: true, message: '请输入申请人姓名', trigger: 'blur' }]
});

// 根据会员类型动态设置表单验证规则
watch(() => formData.memberType, (newType) => {
  if (newType === 'B' || newType === 'C') {
    rules.companyName = [{ required: true, message: '请输入企业名称', trigger: 'blur' }];
    rules.position = [{ required: true, message: '请输入职务', trigger: 'blur' }];
    rules.registeredCapital = [{ required: true, message: '请输入企业注册资金', trigger: 'change' }];
    rules.companyAddress = [{ required: true, message: '请输入单位地址', trigger: 'blur' }];
    rules.businessScope = [{ required: true, message: '请输入经营范围', trigger: 'blur' }];
    rules.proposedPosition = [{ required: true, message: '请选择拟任总会职务', trigger: 'change' }];
  } else {
    delete rules.companyName;
    delete rules.position;
    delete rules.registeredCapital;
    delete rules.companyAddress;
    delete rules.businessScope;
    delete rules.proposedPosition;
  }
});

// 根据会员类型和职位自动设置缴费金额
watch([() => formData.memberType, () => formData.proposedPosition], ([type, position]) => {
  if (type === 'A') {
    if (position === '会员') {
      formData.paymentAmount = 500;
    } else if (position === '理事') {
      formData.paymentAmount = 2000;
    } else if (position === '常务理事') {
      formData.paymentAmount = 3000;
    } else if (position === '副会长') {
      formData.paymentAmount = 6000;
    } else if (position === '常务副会长') {
      formData.paymentAmount = 15000;
    } else if (position === '执行会长') {
      formData.paymentAmount = 25000;
    } else {
      formData.paymentAmount = 500; // 默认为普通会员价格
    }
  } else if (type === 'B') {
    formData.paymentAmount = 1000;
  } else if (type === 'C') {
    formData.paymentAmount = 2000;
  } else {
    formData.paymentAmount = 0;
  }
}, { immediate: true });



// 表单提交
const submitForm = async () => {
  if (!applicationFormRef.value) return;
  console.log(formData);
  await applicationFormRef.value.validate((valid) => {
    if (valid) {
      ClanAssociationAPI.applyMember(formData).then(response => {
        console.log(response);
        ElMessage.success('申请提交成功！');
      }).catch(error => {
        ElMessage.error('申请提交失败！');
      });
    } else {
      ElMessage.error('请完善表单信息！');
      return false;
    }
  });
};

// 重置表单
const resetForm = () => {
  if (!applicationFormRef.value) return;
  applicationFormRef.value.resetFields();
  formData.photoUrl = '';
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.form-card {
  margin-bottom: 20px;
}

.form-header {
  text-align: center;
  margin-bottom: 30px;
}

.form-title {
  font-size: 24px;
  font-weight: bold;
}

.form-section {
  margin-bottom: 20px;
}



.upload-tip {
  font-size: 12px;
  color: #606266;
  margin-top: 5px;
}

.approval-section {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding-top: 10px;
}

.approval-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.approval-blank {
  flex: 1;
  border-bottom: 1px solid #dcdfe6;
  margin-left: 10px;
  min-width: 100px;
}

.form-actions {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.payment-amount {
  font-size: 16px;
  font-weight: bold;
  color: #409EFF;
}

.qr-code-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
}

.qr-code-image {
  width: 100px;
  height: 100px;
  margin-bottom: 5px;
}

.qr-code-tip {
  font-size: 12px;
  color: #606266;
}


</style>